import React, { useEffect } from 'react'
// import * as echarts from 'echarts';
import * as echarts from 'echarts/core';
import Pts from 'prop-types'
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
  } from 'echarts/components';
  import { PieChart } from 'echarts/charts';
  import { LabelLayout } from 'echarts/features';
  import { CanvasRenderer } from 'echarts/renderers';
  
  echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
  ]);
  

const Pie = (props) => {
  useEffect(() => {
    var chartDom = document.getElementById(props.id)
    var myChart = echarts.init(chartDom)
    var option
    option = {
      title: {
        text:  props.title,
        subtext: '副标题',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      // legend: {
      //   orient: 'verticalAlign',
      //   left: 'left',
      // },
      series: [
        {
          name: props.name,
          type: 'pie',
          radius: '50%',
          data: props.data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    }
    // 是否添加图例
    if (props.lengend) {
      option.legend = { orient: 'vertical', left: 'right' }
  }
    option && myChart.setOption(option)
  },[])

  return <div id={props.id} style={{ width: props.w, height: props.h }}></div>
}

// 设置默认值
Pie.defaultProps = {
  w: '33.3%',
  h: '300px',
}
Pie.protoType = {
  title: Pts.string.isRequired,//标题
  data: Pts.array.isRequired,//接收的数据
  lengend:Pts.bool.isRequired,//是否展示图例
  name:Pts.string.isRequired
}

export default Pie
